.pile-search-bar{
  position: relative;
  padding: 8px 10px;
  background: @fill-base;
  border-top: @border-width-sm solid @border-color-light;
  border-bottom: @border-width-sm solid @border-color-light;
  font-size: @font-size-base;
  .pile-search-form{
    position: relative;
    .pile-search-layout{
      position: relative;border: @border-width-sm solid @border-color-base;border-radius: @radius-xs;display: -webkit-box;display: flex;
      .pile-search-input{background: transparent;-webkit-appearance: none;padding: 8px  10px ;    -webkit-box-flex: 1;box-flex: 1;flex: 1;font-size: @font-size-base;text-align: center;}
      .pos-a{position: absolute;top:0;line-height:28px; }
      .icon-search{left:10px;}
      .icon-del{position:static;padding: 0 10px;line-height: 32px;}
    }
  }
  .cancel-btn{border: none;background: transparent;color: @color-text-selected;line-height: 28px;height: 28px;margin-left: 10px;font-size: @font-size-base;margin-bottom: 0}
  .cancel-btn,.icon-del,.icon-search{display: none;}
}

.pile-focusing{
  .cancel-btn,.icon-search{}
  .icon-del{display: inline-block;}
  .icon-del:before{color: @color-text-default;font-size: @font-size-icontext;}
  .pile-search-form .pile-search-layout{
    border-color: @border-color-active;
    .pile-search-input{text-align: left;padding-right: 0;}
  }
}
